<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="plugins/bootstrap-multiselect/bootstrap-select.css"/>
    <!-- jQuery 2.2.3 -->
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>

    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.bootcss.com/xlsx/0.12.13/cpexcel.js"></script>
    <script src="https://cdn.bootcss.com/xlsx/0.12.13/xlsx.core.min.js"></script>
    <script src="plugins/jQuery/ajaxfileupload.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="plugins/bootstrap-table/bootstrap-table.js"></script>
    <script src="plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

    <script src="plugins/bootstrap-multiselect/bootstrap-select.js"></script>
    <script src="plugins/bootstrap-table/bootstrap-table-export.js"></script>
    <script src="plugins/bootstrap-table/tableExport.js"></script>
</head>
<body>
<div class="container-fluid" id="main-container">
    <div id="page-content" class="clearfix">
        <div class="row-fluid">
            <div class="row-fluid">
            <div id="toolbar" class="btn-group" style="width: 800px;">
                <table>

                    <td>
                        <div style="float: right;">
                            <label>性别</label>
                            <select style="height: 25px;" name="sex" id="sex" onchange="$('#dataGrid').bootstrapTable('refresh');" >
                                <option value="" selected >所有</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </td>

                    <td>
                        <div style="float: right;">
                            <label>是否启用</label>
                            <select style="height: 25px;" name="userStatus" id="userStatus" onchange="$('#dataGrid').bootstrapTable('refresh');" >
                                <option value="" selected >全部</option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                    </td>

                    </tr>
                    <tr>
                        <td colspan="99">
                            <label>注册时间:</label>
                            <input id="startTime" type="text" placeholder="开始日期" class="datainp wicon"  size="15" readonly>
                            -
                            <input id="endTime" type="text" placeholder="结束日期" class="datainp wicon"  size="15" readonly>

                            <label>其他:</label>
                            <input id="search" type="text" placeholder="姓名、手机号、昵称" size="18">

                            <!--<button type="button" onclick="$('#dataGrid').bootstrapTable('refresh');" class='btn btn-mini btn-info'>搜索</button>-->
                            <!--<button type="button" onclick="exportData();" class='btn btn-mini btn-info'>导出一</button>-->
                            <button type="button" id="myExportData" value="excel" class='btn btn-mini btn-info'
                                    <!--onClick="doExport('#dataGrid', {type: 'excel',numbers: {html: {decimalMark: '.',-->
                                                                                    <!--thousandsSeparator: ','},-->
                                                                             <!--output: {decimalMark: ',',-->
                                                                                      <!--thousandsSeparator: ''}}-->
                                                      <!--});"-->
                            >导出二</button>
                        </td>
                    </tr>
                </table>
            </div>
            <table id="dataGrid" class="table text-nowrap"></table>
        </div>
    </div>
    <!--/row-->
</div>
<!--/#page-content-->
</div>
<!--/.fluid-container#main-container-->
<script>
//    $(function() {
//        function exportData(){
//            //导出数据
//            $('#dataGrid').tableExport({
//                type: 'excel',
//                exportDataType: "all",
//                escape: 'false',
//                ignoreColumn: [0,12],  //忽略某一列的索引
//                fileName: '用户列表',  //文件名称设置
//                worksheetName: 'sheet1',  //表格工作区名称
//                tableName: '用户列表',
//                onMsoNumberFormat: doOnMsoNumberFormat,
//                onCellHtmlData: DoOnCellHtmlData,
//            });
//        }
////        var option={
////            url: "http://www.sousung.com/chart/chartRun",
////            method: 'post',
////            toolbar : '#toolbar',
////            contentType : 'application/x-www-form-urlencoded',
////            striped : true,
////            showColumns : true,
////            showRefresh : true,
////            pagination : true,
////            pageSize : 10,
////            sortName : 'id',
////            columns : [
////
////                {field: "zjhm", title: "证件号码"},
////                {field: "xm100", title: "姓名"},
////                {field: "xbid", title: "xbid"}
////            ],
//////                    sidePagination : 'server',
//////            queryParamsType : 'limit',
////            queryParams : queryParams,
////            showExport: true,      //是否显示导出
////            buttonsAlign:"right",  //按钮位置
////            responseHandler: function (res) {
//////                $("#sql").html("SQL:" + res.response.sql).hide();
//////                //在ajax获取到数据，渲染表格之前，修改数据源
//////                $("#data-table").show();
//////                $(".pagination-detail").css("background-color", "yellow");
////                console.log(res.response.data);
////                return res.response.data;
////            },
////            exportDataType: "all",              //basic', 'all', 'selected'.
////            exportTypes:['excel'],  //导出文件类型
////            Icons:'glyphicon-export',
////            exportOptions:{
////                ignoreColumn: [0,12],  //忽略某一列的索引
////                fileName: '用户列表',  //文件名称设置
////                worksheetName: 'sheet1',  //表格工作区名称
////                tableName: '用户列表',
////                onMsoNumberFormat: doOnMsoNumberFormat,
////                onCellHtmlData: DoOnCellHtmlData,
////            }
////
////        }
        var option = {
//            url: "http://www.sousung.com/chart/chartRun",
            method: 'post',
            search: true,
            pageNumber: 1, //初始化加载第一页，默认第一页
            pagination: true,//是否分页
            showPaginationSwitch: false,
//        queryParamsType: 'limit',//查询参数组织方式
//        sidePagination: 'server',//指定服务器端分页
            pageSize: 10,//单页记录数
            showRefresh: true,
            //showToggle: true,
            locale: "zh-CN",
            striped: true,
//            columns: [
//
//                {field: "zjhm", title: "证件号码"},
//                {field: "xm100", title: "姓名"},
//                {field: "xbid", title: "xbid"}
//            ],
//            queryParams: queryParams,//请求服务器时所传的参数
            columns: [{
                field: 'id',
                title: 'Item ID'
            }, {
                field: 'name',
                title: 'Item Name'
            }, {
                field: 'price',
                title: 'Item Price'
            }],
            data: [{
                id: 1,
                name: '项目 1',
                price: '价格$1'
            }, {
                id: 2,
                name: '项目 2',
                price: '价格$2'
            }],
            responseHandler: function (res) {
//                $("#sql").html("SQL:" + res.response.sql).hide();
//                //在ajax获取到数据，渲染表格之前，修改数据源
//                $("#data-table").show();
//                $(".pagination-detail").css("background-color", "yellow");
                console.log(res.response.data);
                return res.response.data;
            },
            showExport: true,  //是否显示导出按钮
            buttonsAlign: "right",  //按钮位置
            exportDataType: "all",              //basic', 'all', 'selected'.
            exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型
            Icons:'glyphicon-export',
            exportOptions:{
                ignoreColumn: [0,12],  //忽略某一列的索引
                fileName: '用户列表',  //文件名称设置
                worksheetName: 'sheet1',  //表格工作区名称
                tableName: '用户列表',
//                onMsoNumberFormat: doOnMsoNumberFormat,
//                onCellHtmlData: DoOnCellHtmlData,
            }
        }
        $('#dataGrid').bootstrapTable(option);
//    });
//
//    function queryParams(params) {
//        return {
//            "chart_id": "1808211727316144651",
//            "node_id": "02011534843593000346"
//        }
//    }
//    function exportData(){
//        //导出数据
//        $('#dataGrid').tableExport({
//            type: 'excel',
//            exportDataType: "all",
//            escape: 'false',
//            ignoreColumn: [0,12],  //忽略某一列的索引
//            fileName: '用户列表',  //文件名称设置
//            worksheetName: 'sheet1',  //表格工作区名称
//            tableName: '用户列表',
//            onMsoNumberFormat: doOnMsoNumberFormat,
//            onCellHtmlData: DoOnCellHtmlData,
//        });
//    }
//
//    //数字
//    function doOnMsoNumberFormat(cell, row, col){
//        var result = "";
//        if (row > 0 && col == 0){
//            result = "\\@";
//        }
//        return result;
//    }
//
//    //处理导出内容,这个方法可以自定义某一行、某一列、甚至某个单元格的内容,也就是将其值设置为自己想要的内容
//    function DoOnCellHtmlData(cell, row, col, data){
//        if(row == 0){
//            return data;
//        }
//
//        //由于备注列超过6个字的话,通过span标签处理只显示前面6个字,如果直接导出的话会导致内容不完整,因此要将携带完整内容的span标签中title属性的值替换
//        if(col == 4 || col ==11 || col == 7){
//            var spanObj = $(data);//将带 <span title="val"></span> 标签的字符串转换为jQuery对象
//            var title = spanObj.attr("title");//读取<span title="val"></span>中title属性的值
//            //var span = cell[0].firstElementChild;//读取cell数组中的第一个值下的第一个元素
//            if(typeof(title) != 'undefined'){
//                return title;
//            }
//        }
//
//        return data;
//    }
        function doExport(selector) {
            var options = {
                //ignoreRow: [1,11,12,-2],
                //ignoreColumn: [0,-1],
                //pdfmake: {enabled: true},
                tableName: 'Table name'
            };

            jQuery.extend(true, options, {type: 'excel',numbers: {html: {decimalMark: '.',
                thousandsSeparator: ','},
                output: {decimalMark: ',',
                    thousandsSeparator: ''}}
            });

            $(selector).tableExport(options);
        }
</script>
</body>
</html>